<template>
  <div>
    <header>
      <van-icon name="arrow-left" size="22" slot="left" @click="goBack" />
      <span slot="center">支付结果</span>
    </header>
    <div class="success">
      <div><img :src="imgUrl" alt=""></div>
      <p>{{ resultMsg }}</p>
    </div>
  </div>
</template>

<script>
import { payResultRequest } from '@/network/api/pay'
export default {
  name: 'paysuccess',
  beforeRouteEnter(to, from, next) {
    if (from.path == '/') {
      // 此时来源为支付（成功或未支付）返回来的
      console.log('beforeRouteEnter');
    }
    next()
  },
  data() {
    return {
      isPaySuccess: false,
      imgUrl: '',
      resultMsg: ''
    }
  },
  methods: {
    goBack() {
      this.$router.replace('/cart')
    }
  },
  async created() {
    const res = await payResultRequest(this.$route.query.out_trade_no, this.$route.query.trade_no)
    if (res.result.status === 2) {
      this.imgUrl = require('@/assets/images/pay/success.svg')
      this.resultMsg = '支付成功~'
    } else {
      this.imgUrl = require('@/assets/images/pay/fail.svg')
      this.resultMsg = '发送错误, 支付失败!'
    }
  },
}
</script>

<style scoped lang="less">
header {
  position: relative;
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  background-color: #b0352f;

  .van-icon {
    position: absolute;
    left: 3px;
    top: 13px;
  }
}

.success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;

  div {
    width: 150px;
    height: 150px;

    img {
      width: 100%;
    }
  }

  p {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #666;
  }
}
</style>

